<template>
  <a-drawer
    title="修改工作集"
    placement="right"
    :closable="false"
    :visible="show"
    @close="onClose"
    width="70%"
    destroyOnClose
  >
    <a-spin :spinning="spinningShow">
      <section v-for="(item, index) in list" :key="index">
        <h2>【{{ mitem.JobTempletName }}】第{{ index + 1 }}项</h2>
        <a-form-model
          :model="form"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-model-item
            :id="trendsId(index, idx)"
            :label="`(${idx + 1})【${itm.JobItemName}】${itm.JobItemDesc} ${
              typeFun(itm.DataTypeIndex).name
            } `"
            v-for="(itm, idx) in item"
            :key="itm.JobItemID"
            :required="itm.MustRecord"
          >
            <check-form
              ref="CHECK"
              v-if="itm.DataTypeIndex == 2 && itm.PackageSource != ''"
              :item="itm"
              text="SectionResultStr"
            ></check-form>
            <radio-form
              v-if="itm.DataTypeIndex == 1 && itm.PackageSource != ''"
              :item="itm"
              text="SectionResultStr"
            ></radio-form>
            <date-form
              v-if="itm.DataTypeIndex == 7"
              :item="itm"
              text="SectionResultStr"
            ></date-form>
            <time-form
              v-if="itm.DataTypeIndex == 6"
              :item="itm"
              text="SectionResultStr"
            ></time-form>
            <input-form
              v-if="itm.DataTypeIndex == 3"
              :item="itm"
              text="SectionResultStr"
            ></input-form>
            <num-input-form
              v-if="itm.DataTypeIndex == 4"
              :item="itm"
              text="SectionResultStr"
            ></num-input-form>
            <img-form
              v-if="itm.DataTypeIndex == 9"
              :item="itm"
              text="SectionResultStr"
            ></img-form>
            <file-img-form
              ref="IMG"
              v-if="itm.DataTypeIndex == 8"
              :item="itm"
              text="SectionResultStr"
            ></file-img-form>
          </a-form-model-item>
        </a-form-model>
      </section>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
        zIndex: 50,
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose"> 返回 </a-button>
      <a-button type="primary" @click="onSubmit"> 保存 </a-button>
    </div>
  </a-drawer>
</template>

<script>
import CheckForm from "../edit-assembly/check-box.vue";
import RadioForm from "../edit-assembly/radio-box.vue";
import DateForm from "../edit-assembly/date-box.vue";
import TimeForm from "../edit-assembly/time-box.vue";
import InputForm from "../edit-assembly/input-box.vue";
import NumInputForm from "../edit-assembly/input-box.vue";
import ImgForm from "../edit-assembly/img-box.vue";
import FileImgForm from "../edit-assembly/file-img-box.vue";
import { CommonUploadFile, delEnclosureByRelationTableId } from "@/api/Common";
import { completedRecordDetai } from "@/api/JobRecord";
export default {
  props: ["show", "list", "mitem"],
  components: {
    CheckForm,
    RadioForm,
    DateForm,
    TimeForm,
    InputForm,
    NumInputForm,
    ImgForm,
    FileImgForm,
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      flag: false, //检测是否有未填项
      spinningShow: false, //加载
      typeList: [
        { type: 5, name: "附件" },
        { type: 8, name: "图片" },
        { type: 1, name: "单选" },
        { type: 9, name: "复核" },
        { type: 3, name: "填空(字符)" },
        { type: 4, name: "填空(数值)" },
        { type: 7, name: "日期" },
        { type: 6, name: "时间" },
        { type: 2, name: "多选" },
        { type: 10, name: "填空(字符)" },
        { type: null, name: "" },
      ], //
    };
  },
  methods: {
    /* 动态加载id */
    trendsId(index, idx) {
      return `item${index}${idx}`;
    },
    /* 关闭修改弹窗 */
    onClose() {
      this.$emit("update:show", false);
    },
    //查找项
    typeFun(type) {
      return this.typeList.find((item) => item.type == type);
    },
    /* 删除图片 */
    async delImg(id) {
      let res = await delEnclosureByRelationTableId({
        enclosureID: id,
      });
    },
    /* 提交修改批记录 */
    async onSubmit() {
      this.spinningShow = true;

      if (this.flag) return;
      let jobRecordList = [];
      this.list.forEach((selement, seleidx) => {
        selement.forEach((si, sidx) => {
          /* 处理上传图片 */
          if (si.DataTypeIndex == 8) {
            console.log(si);
            if (si.imgList && si.imgList.length > 0) {
              si.SectionResultStr = `图片名`;
              si.imgList.map((item, index) => {
                let formData = new FormData();
                formData.append("File", item.originFileObj);
                formData.append("FileType", 2);
                formData.append("RelationTableId", si.JobRecordDetailID);
                formData.append("EnclosureTypeName", "其他附件");
                let res = CommonUploadFile(formData);
              });
            } else {
              if (si.fileListID) {
                this.delImg(si.fileListID);
                si.SectionResultStr = null;
              }
            }
          }
         
          jobRecordList.push(si);
        });
      });
      this.list.forEach((element, eleidx) => {
        element.forEach((i, idex) => {
          if (
            i.MustRecord && i.DataTypeIndex != 9 &&
            (i.SectionResultStr == null || i.SectionResultStr == "")
          ) {
            this.flag = true;
            if (this.flag) {
              this.$message.error(
                `第${eleidx + 1}项,第${idex + 1}为必填,请填写再提交`
              );
            }
            throw Error();
          } else {
            this.flag = false;
          }
        });
      });
      this.mitem.JobRecordDetaiList = jobRecordList;
      let res = await completedRecordDetai(this.mitem);
      if (res.Status == 10000) {
        this.$message.success("提交成功");
        this.onClose();
        this.$emit("upList");
      }
      this.spinningShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
section {
  margin-bottom: 3.125rem;
}
</style>
